<template>
	<div>
		<el-menu :default-openeds="openeds" class="el-menu-vertical-demo" @open="handleExpend" @close="handleCollapse"
		 :collapse="isCollapse">
			<menu-item :menu="item" v-for="(item, i) in menuData" @click="click"></menu-item>
		</el-menu>
	</div>
</template>

<script>
	import utils from 'util/utils.js';
	import menuItem from './menuItem.vue';
	export default {
		name: 'menuTree',
		components: {
			menuItem
		},
		data() {
			return {
				menuData: [],
				openeds: []
			};
		},
		props: {
			isOpen: {
				type: Boolean,
				default () {
					return false;
				}
			},
			isCollapse: {
				type: Boolean,
				default () {
					return false;
				}
			},
			items: {
				type: Array,
				default () {
					return [];
				}
			},
			type: {
				type: Number,
				default () {
					return 2;
				}
			}
		},
		methods: {
			handleMenuOpen(menuid) {

				this.openeds = [];
				this.openeds = this.openeds.push(menuid);
			},
			handleMenuCollapse() {
				if (this.isOpen) {
					let menudata = this.getMenuDate();
					for (let v of menudata) {
						this.openeds = this.openeds.concat(this.getChildMenu(v));
					}
				} else {
					this.openeds = [];
				}
			},
			getChildMenu(menu) {
				let children = [];
				children.push(menu.id);
				for (let item of menu.children) {
					children = children.concat(this.getChildMenu(item));
				}
				return children;
			},
			//点击事件
			click(e) {
				let option = {
					id: e.$attrs.url,
					name: e.$attrs.name,
					url: e.$attrs.url,
					closable: true
				};
				this.$emit('click', option);
			},
			getDate() {
				return this.items;
			},
			getMenuDate() {
				return this.menuData;
			},
			//打开左侧菜单
			handleExpend(key, keyPath) {},
			//关闭左侧菜单
			handleCollapse(key, keyPath) {},
			init() {
				if (this.items) {
					let tmp = this.items;
					if (this.type == 2) {
						tmp = utils.convertSimpleTreeToStandardTree(tmp, {
							defaultParent: 0,
							label:"name"
						} ,{
							label:"name"
						});
					}
					this.menuData = tmp;
					this.handleMenuCollapse();
				}
			}
		},
		watch: {
			items() {
				this.init();
			},
			isOpen() {
				this.handleMenuCollapse();
			}
		},
		mounted() {
			this.init();
		}
	};
</script>

<style scoped="scoped">
	.el-menu--popup {
		min-width: auto;
	}

	.el-menu--horizontal {
		left: auto !important;
		width: 150px;
		right: 0;
	}

	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 200px;
	}
</style>
